<template>
  <div>
    <baseEchartsVue v-if="series.length" :options="options" :echartsRef="echartsRef" :height="height" :width="width" />
  </div>
</template>

<script>
import BaseEchartsVue from './base-echarts.vue';
export default {
  components: { BaseEchartsVue },
  props: {
    height: {
      type: String,
      default: "500px"
    },
    width: {
      type: String,
      default: "100%"
    },
    echartsRef: {
      type: String,
      required: true
    },
    legend: {
      type: Array,
      default() { return [] }
    },
    xAxis: {
      type: Array,
      default() { return [] }
    },
    yAxis: {
      type: Array,
      default() { return [] }
    },
    series: {
      type: Array,
      default() { return [] }
    }
  },

  computed: {

    options() {
      // 获取最大值方法
      function calMax(arr) {
        var max = Math.max.apply(null, arr); // 获取最大值方法
        var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
        var maxval = maxint * 5 + 5; // 最终设置的最大值
        return maxval; // 输出最大值
      }
      // 获取最小值方法
      function calMin(arr) {
        var min = Math.min.apply(null, arr); // 获取最小值方法
        var minint = Math.floor(min / 1); // 向下以1的倍数取整
        var minval = minint * 1 - 5; // 最终设置的最小值
        return minval < 0 ? 0 : minval; // 输出最小值
      }
      // 调用方法，获取数据的最大值&最小值
      var maxData1 = calMax(this.series[0]);
      var maxData2 = calMax(this.series[1]);
      var minData1 = calMin(this.series[0]);
      var minData2 = calMin(this.series[1]);
      console.log(maxData1, minData1, maxData2, minData2);

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: this.legend
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxis,
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: minData1,
            max: maxData1,
            splitNumber: 6, //设置坐标轴的分割段数
            interval: (maxData1 - minData1) / 6, // 标轴分割间隔

            axisLabel: {
              formatter: function (v) {
                return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
              }
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: minData2,
            max: maxData2,
            splitNumber: 6, //设置坐标轴的分割段数
            interval: (maxData2 - minData2) / 6, // 标轴分割间隔

            axisLabel: {
              formatter: function (v) {
                return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
              }
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: this.series[0]
          },

          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: this.series[1]
          }
        ],
        // graphic: {
        //   type: 'text',     // 类型：文本
        //   left: 'center',
        //   top: 'middle',
        //   silent: true,     // 不响应事件
        //   invisible: (this.series[1].length && this.series[1].length) ? true : false,   // 有数据就隐藏
        //   style: {
        //     fill: '#9d9d9d',
        //     text: '暂无数据',
        //     font: 'bolder 2em "Microsoft YaHei", sans-serif'
        //   }
        // }

      };


      // let option = {
      //   legend: {
      //     data: [
      //       {
      //         name: "kpi_val",
      //         // 强制设置图形为圆。
      //         icon: "circle",
      //       },
      //       {
      //         name: "样本数",
      //         // 强制设置图形为圆。
      //         icon: "circle",
      //       },
      //     ],
      //     type: "scroll",
      //     orient: "horizontal", // vertical
      //   },
      //   title: {
      //     text: "xx",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "cross",
      //     },

      //   },
      //   toolbox: {
      //     show: true,
      //     feature: {
      //       saveAsImage: {},
      //       dataZoom: { show: true },
      //       restore: { show: true },
      //     },
      //   },
      //   dataZoom: {
      //     show: true,
      //     realtime: true,
      //     start: 0,
      //     end: 100,
      //     height: "15px", //高度设置，另外还有宽度
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: true,
      //     data: this.xAxis
      //   },
      //   yAxis: [
      //     {
      //       type: "value",
      //       name: "kpi_val",
      //       min: minData1,
      //       max: maxData1,
      //       splitNumber: 6, //设置坐标轴的分割段数
      //       interval: (maxData1 - minData1) / 6, // 标轴分割间隔

      //       axisLabel: {
      //         formatter: function (v) {
      //           return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
      //         }
      //       },

      //     },
      //     {
      //       type: "value",
      //       name: "样本数",
      //       min: minData2,
      //       max: maxData2,
      //       splitNumber: 6,
      //       interval: (maxData2 - minData2) / 6,
      //       axisLabel: {
      //         formatter: function (v) {
      //           return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
      //         }
      //       },

      //     },
      //   ],
      //   series: [

      //     {
      //       name: "kpi_val",
      //       type: "line",
      //       symbolSize: 1,
      //       connectNulls: true,
      //       data: this.series[0],


      //     },
      //     {
      //       name: "样本数",
      //       type: "bar",
      //       symbolSize: 1,
      //       connectNulls: true,
      //       data: this.series[1],
      //       itemStyle: {
      //         normal: {
      //           color: "rgba(0,0,0,.5) "
      //         }
      //       },


      //     },
      //   ],
      // };
      return option
    },

  }

}
</script>

<style lang="less" scoped>

</style>
